<template>
  <div class="recommend" style="width: 100%; padding: 10px 10px">
    <div class="customerInfos" style="width: 100%;line-height: 200px;height: 200px;margin: 0 auto">
      <div class="label">
        <div class="picture">
          <p v-for="item in label" v-show="display" class="labelItem">{{ item }}</p>
        </div>
      </div>
    </div>
    <div class="custIntention">
      <p>客户意图预判：</p>
      <div>
        <p v-for="item2 in label2">{{ item2 }}</p>
      </div>
    </div>
    <div class="track">
      <avue-crud v-model="obj" :data="data" :option="option">
        <template slot="filelabel" slot-scope="scope">
          <el-link target="_blank" type="primary" @click="routeToNine">{{ scope.row.filelabel[0] }}</el-link>
          <span v-show="scope.row.filelabel[0] && scope.row.filelabel[1]"> | </span>
          <el-link target="_blank" type="primary" @click="routeToNine">{{ scope.row.filelabel[1] }}</el-link>
        </template>
      </avue-crud>
    </div>
    <div class="reminded">
      <p>重要提醒:</p>
      <div v-for="item1 in infoLabel">{{ item1 }}</div>
    </div>
    <div class="recommended">
      <p>营销推荐办理：</p>
      <div v-for="item in list" class="list">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { recommend, querySessionLabelInfo } from '@/views/recommend/recommend1.js'

export default {
  name: 'Recommend',
  data() {
    return {
      list: [],
      label: [],
      label2: [],
      infoLabel: [],
      obj: {},
      data: [],
      display: false,
      option: {
        title: '表格的标题',
        page: false,
        align: 'center',
        menuAlign: 'center',
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        delBtn: false,
        editBtn: false,
        viewBtn: true,
        menuTitle: '摘要',
        column: [
          {
            label: '时间',
            prop: 'starttimestamp'
          }, {
            label: '渠道',
            prop: 'channeltype'
          }, {
            label: '业务办理轨迹',
            prop: 'filelabel',
            slot: true
          }
        ]
      }
    }
  },
  mounted() {
    //      this.querySessionLabelInfoFun(15353604577)
    const self = this
    //      self.initData()
    //      setTimeout(function () {
    //        recommend()
    //        self.display = true
    //      }, 1000)
    // 电话页签
    window.eventEmitter.$on('EventCallRecordChange', () => {
      self.initData()
      setTimeout(function() {
        recommend()
        self.display = true
      }, 1000)
      self.querySessionLabelInfoFun(Constants.Model.uid)
    })
    // 在线页签
    window.eventEmitter.$on('EventChatRecordChange', () => {
      self.initData()
      setTimeout(function() {
        recommend()
        self.display = true
      }, 1000)
      self.querySessionLabelInfoFun(Constants.ModelChat.uid)
    })
    // 在线会话结束
    window.eventEmitter.$on('EventChatDone', () => {
      self.clearAll()
    })
    // 电话结束
    window.eventEmitter.$on('EventAfterCall', () => {
      self.clearAll()
    })
  },
  methods: {
    // 查询业务轨迹
    querySessionLabelInfoFun: function(cusNum) {
      return
      const tenantId = Constants.Agent.tenantId || 'default'
      querySessionLabelInfo(tenantId, cusNum).then(response => {
        const data = response.data
        console.log('response biz make trance is: ' + JSON.stringify(data))
        if (data.data) {
          data.data.map(item => {
            item.filelabel = item.filelabel.split('|')
          })
          this.data = data.data.slice(0, 5)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 全局清空
    clearAll: function() {
      this.list = []
      this.data = []
      this.label = []
      this.label2 = []
      this.infoLabel = []
    },
    // 全局赋值
    initData: function() {
      this.display = false
      this.list = [
        {
          label: '产品名称：',
          value: '理财产品天天盈'
        }, {
          label: '产品类型：',
          value: '非保本浮动收益 '
        }, {
          label: '期限：',
          value: '181天 '
        }, {
          label: '个人投资起点：',
          value: '100万 '
        }, {
          label: '认购日期：',
          value: '2020-01-13 '
        }, {
          label: '销售对象：',
          value: '个人'
        }, {
          label: '预期年化收益率：',
          value: '4.3%'
        }
      ]
      this.label = ['投资意愿强', '旅游达人', '消费率高', '收入稳定', '金领']
      this.label2 = ['账单查询与还款', '信用卡分期', '未出账单查询']
      this.infoLabel = ['客户已逾期', '重要客户']
    },
    // 自定义按钮
    routeToNine() {
      this.$emit('routeToNine')
    }
  }
}
</script>

<style scoped>
  > > > .avue-crud__menu {
    display: none;
  }

  .recommend {
    font-size: 14px;
    /*line-height: 300px;*/
    /*height: 300px;*/
  }

  .label {
    /*margin: 0 auto;*/
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
  }

  .label p, .label div {
    display: inline-block;
  }

  .picture {
    position: absolute;
    margin-top: 20px;
    width: 94px;
    background: url('../../../public/assets/theme/img/recommend/headPhoto.png') no-repeat;
    height: 94px;
    border-radius: 47px;
  }

  .label p {
    width: 100px;
    min-height: 30px;
    line-height: 30px;
  }

  .custIntention div, .custIntention p, .reminded > p, .reminded > div {
    display: inline-block;
  }

  .custIntention > p, .reminded > p, .recommended p {
    margin-bottom: 20px;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
  }

  .custIntention div p, .reminded > div {
    margin-left: 20px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .reminded > div {
    color: rgba(255, 57, 57, 1);
  }

  .track {
    margin: 0px 0 30px 0;
  }

  .list {
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
  }

  .list span:nth-child(1) {
    font-weight: 400;
    color: rgba(143, 143, 145, 1);
  }

  .list span:nth-child(2) {
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
  }

  .list span:nth-child(2), .list span:nth-child(1), .custIntention div p, .reminded > div, .custIntention > p, .reminded > p, .recommended p {
    font-size: 14px;
    font-family: Microsoft YaHei;
  }

  .recommended > div {
    padding: 0 20px;
  }

  .labelItem {
    position: absolute;
    border-radius: 100px;
    margin-left: 10px;
  }
</style>
